<template>
  <div style="height: 100vh; overflow-y: hidden">
    <el-row>
      <el-col :span="14" class="leftImg">
        <img src="@/assets/login-bg-e4ea539c.svg" alt="">
      </el-col>
      <el-col class="col" :span="10">
        <el-card class="box-card" shadow="never">
          <div style="margin:0 0 100px 0; font-size: 30px;">智慧园区-登录</div>
          <el-form :model="loginForm" :rules="loginRules">
            <el-form-item prop="username" label="用户名">
              <el-input v-model="loginForm.username" size="small" />
            </el-form-item>
            <el-form-item prop="password" label="密码">
              <el-input v-model="loginForm.password" size="small" />
            </el-form-item>
            <el-form-item>
              <el-checkbox v-model="rememberme">记住我</el-checkbox>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" style="width: 100%;" @click="login">登录</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { login } from '@/api/user'
import store from '@/store'
export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        username: 'demo',
        password: 'zh@hm#23'
      },
      loginRules: {
        username: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        password: [{ required: true, message: '密码不能为空', tirgger: 'blur' }]
      },
      rememberme: true
    }
  },
  methods: {
    async login() {
      store.dispatch('user/login')
      console.log(this.loginForm)
      const rest = await login(this.loginForm)

      console.dir(rest)
      console.log(rest.response.data.msg)
      this.$message.error(rest.response.data.msg)
    }
  }
}
</script >

<style lang="scss" scoped>
.leftImg {
  height: 100vh;
  img {
    width: 100%;
    height: 100%;
    border-radius: 0 40px 0 0;
    object-fit: cover;
  }
}
.col {
  padding: 100px;
}
.box-card {
  background-color: #fff;
  margin-top: 100px;
  border: 1px solid#fff;

}

// .el-form-item__content {
//   font-size: 50px;
// }
</style>
